<template>
  <div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clearList"
    />
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table doumee-element-tableb"
    >
      <el-table-column
        align="center"
        label="订单号"
        prop="orderId"
        min-width="220"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="订单详情"
        prop="orderInfo"
        min-width="300"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="订单总时长"
        prop="allTime"
        min-width="120"
      />
      <el-table-column
        align="center"
        label="活动人数"
        prop="meetCount"
        min-width="100"
      />
      <el-table-column
        align="center"
        label="原价总价"
        prop="allPrice"
        min-width="100"
      />
      <el-table-column
        align="center"
        label="折后总价"
        prop="realPrice"
        min-width="100"
      />
      <el-table-column
        align="center"
        label="支付方式"
        prop="payMethodName"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="发起人"
        min-width="120"
        prop="creatorName"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="报名截止时间"
        prop="dateLimit"
        min-width="160"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="活动说明"
        min-width="160"
        prop="info"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="备注"
        min-width="160"
        prop="remarks"
        show-overflow-tooltip
      />
      <el-table-column
        label="创建时间"
        prop="createTime"
        min-width="160"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        label="状态"
        prop="sort"
        min-width="100"
        align="center"
        fixed="right"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ scope.row.statusName || "" }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="meta.indexOf('cancel') > -1"
        label="操作"
        min-width="100"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button
              v-if="scope.row.status <= 3"
              v-preventReClick
              type="text"
              @click="delayShow(scope.row)"
              >取消</el-button
            >
            <span v-else>-</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="total"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="pageSizeChange"
    />
    <el-dialog
      title="取消"
      :visible.sync="showHide"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
    >
      <el-form ref="ruleForm" :model="form" :rules="rules">
        <el-form-item label="取消原因" prop="cancelNote" label-width="100px">
          <el-input
            v-model="form.cancelNote"
            type="textarea"
            :rows="2"
            placeholder="请输入取消原因"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDelay">取消</el-button>
        <el-button
          v-preventReClick
          type="primary"
          @click="clickHide('ruleForm')"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <areaSellOrderDetail ref="areaSellOrderDetail" />
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import store from '@/store'
import { allConfigList, siteOrderInfo, getMeetList, cancelMeet, getOrderTypeQuery } from '@/api'
import QueryForm from '@/components/QueryForm'
import areaSellOrderDetail from '@/components/areaSellOrderDetail.vue'
export default {
  components: {
    QueryForm, areaSellOrderDetail
  },
  data() {
    return {
      queryFormConfig: {
        formItems: [{
          filed: 'orderId',
          type: 'input',
          label: '订单号',
          placeholder: '请输入订单号',
          clearable: true
        }, {
          filed: 'phone',
          type: 'input',
          label: '手机号',
          placeholder: '请输入手机号',
          clearable: true
        }, {
          filed: 'payMethod',
          type: 'select',
          label: '支付类型',
          placeholder: '请选择支付类型',
          clearable: true,
          options: []
        }, {
          filed: 'status',
          type: 'select',
          label: '订单状态',
          placeholder: '请选择订单状态',
          clearable: true,
          labelCode: 'name',
          options: []
        }, {
          filed: 'time',
          type: 'daterange',
          clearable: true
        }],
        online: true
      },
      pickerStart: {
        disabledDate: (time) => {
          return this.pickDateStart(time)
        }
      },
      modalDialog: store.getters.dialog,
      list: [],
      meta: [],
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      statusList: [
        { value: '1', label: '待支付' },
        { value: '2', label: '报名中' },
        { value: '3', label: '报名已截止' },
        { value: '4', label: '进行中' },
        { value: '5', label: '已结束' },
        { value: '6', label: '已取消' }
      ],
      allPayMethedList: [],
      filters: {},
      listLoading: false,
      showHide: false,
      form: {},
      width: '400px',
      maxEndDay: '',
      id: '',
      rules: {
        cancelNote: [
          { required: true, message: '请输入取消原因', trigger: 'blue' }
        ]
      }
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getPayMethedList()
    this.getStatusList()
  },
  methods: {
    getStatusList() {
      getOrderTypeQuery({ param: {} }).then(res => {
        this.queryFormConfig.formItems[3].options = res.recordList || []
      })
    },
    payMethod(status) {
      const temp = this.allPayMethedList.fine((item) => item.value === status)
      return temp ? temp.name : '-'
    },
    orderBtn(row) {
      siteOrderInfo({ param: { businessId: row.id } }).then((res) => {
        if (res.errorCode === '000000') {
          this.$refs.areaSellOrderDetail.showDetail(res.record, 2)
        }
      })
    },
    getPayMethedList() {
      // 初始化请求
      allConfigList({ param: { type: '2', code: 'PAY_METHOD_MEET_ORDER' } })
        .then(res => {
          if (res.errorCode !== '000000') return
          const arr = res.recordList
          arr.forEach(e => {
            e.label = e.name
          })
          this.queryFormConfig.formItems[2].options = arr
          this.allPayMethedList = arr
        })
        .catch(err => {
          console.log(err)
        })
    },
    pageSizeChange(val) {
      this.pagination.rows = val
      this.getList(1)
    },
    pickDateStart(time) {
      if (this.maxEndDay) {
        return new Date(new Date(time).toLocaleDateString()).getTime() >= new Date(new Date(this.maxEndDay).toLocaleDateString()).getTime()
      }
      return time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
    },
    clearList() {
      this.filters = {}
      this.getList(1)
    },
    getList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      if (filters.time && filters.time.length > 0) {
        filters.startTime = filters.time[0]
        filters.endTime = filters.time[1]
      } else {
        filters.startTime = ''
        filters.endTime = ''
      }
      this.listLoading = true
      getMeetList({ pagination, param: { venueId, ...filters } })
        .then(res => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.list = res.recordList
          this.total = res.totalCount
          if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
            this.getList(Math.ceil(res.totalCount / pagination.rows))
          }
          this.$refs.table.doLayout()
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    delayShow(cnt) {
      this.showHide = true
      this.id = cnt.id
      this.form = {}
    },
    cancelDelay() {
      this.showHide = false
    },
    clickHide(formName) {
      const { form, id } = this
      const venueId = sessionStorage.getItem('venueId')
      this.$refs[formName].validate((valid) => {
        if (valid) {
          cancelMeet({ param: { cancelNote: form.cancelNote, meetId: id, venueId } })
            .then(res => {
              if (res.errorCode === '000000') {
                this.$message.success('取消成功')
                this.showHide = false
                this.getList()
              }
            })
            .catch((err) => {
              console.log(err)
            })
        } else {
          return false
        }
      })
    }
  }
}
</script>

